<template>
    <div>
        <van-tabbar v-model="active" @change="changeTab">
            <van-tabbar-item icon="wap-home-o" name="">首页</van-tabbar-item>
            <van-tabbar-item icon="todo-list-o" name="reply">答题</van-tabbar-item>
            <van-tabbar-item icon="desktop-o" name="learn">学习</van-tabbar-item>
            <van-tabbar-item icon="contact-o" name="mine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
const props = defineProps(['faActive'])
import { ref, computed, onMounted,watch } from 'vue';
// import { useRouter } from 'vue-router';
const emit = defineEmits(['changeActive'])
// const router = useRouter();
const active = ref("")

watch(
  () => props.faActive,
  (newActive, oldActive) => {
    active.value = newActive
  }
)

function changeTab(name) {
    if (name) {
        emit('changeActive',`${name}`)
    }else{
        emit('changeActive',null)
    }
    
}
</script>
<style lang="less" scoped></style>